<template>
  <div class="detailBox">
    <el-card :body-style="{ padding: '20px' }" shadow="always">
      <h1 class="title">用户资料</h1>
      <div class="flex flex-wrap mb-4">
        <div class="flex items-center flex-1">
          <span class="left">用户ID：</span>
          <span class="right">{{ propData.user_code }}</span>
        </div>
        <div class="flex items-center flex-1">
          <span class="left">用户昵称：</span>
          <span class="right">{{ propData.nickname }}</span>
        </div>
        <div class="flex items-center flex-1">
          <span class="left">注册时间：</span>
          <span class="right">{{ propData.user.register_time }}</span>
        </div>
        <div class="flex items-center flex-1">
          <span class="left">所属公会：</span>
          <span class="right">{{ propData.sociaty_name }}</span>
        </div>
        <div class="flex items-center flex-1">
          <span class="left">性别：</span>
          <span class="right">{{ propData.sex === 1 ? '男' : '女' }}</span>
        </div>
        <div class="flex items-center flex-1">
          <span class="left">个性签名：</span>
          <span class="right">{{ propData.signature }}</span>
        </div>
      </div>
      <div class="flex mb-4 items-center">
        <span class="left">语音签名：</span>
        <audio :src="propData.intro_voice" controls></audio>
      </div>
      <div class="flex mb-4">
        <span class="left">头像：</span>
        <el-image :src="propData.head_picture" class="avatar" fit="fill">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <div class="flex mb-4">
        <span class="left">照片：</span>
        <div class="pictureBox">
          <el-image
            v-for="(item, index) in propData.user_phone"
            :key="index"
            :preview-src-list="srcList"
            :src="item"
            class="picture"
            fit="fill"
          ></el-image>
        </div>
      </div>
    </el-card>
    <el-card :body-style="{ padding: '20px' }" shadow="always">
      <h1 class="title">审核资料</h1>
      <div class="flex items-center mb-4">
        <span class="left">姓名：</span>
        <span class="right">{{ propData.streamer_apply.name }}</span>
      </div>
      <div class="flex items-center mb-4">
        <span class="left">电话：</span>
        <span class="right">{{ propData.streamer_apply.mobile }}</span>
      </div>
      <div class="flex items-center mb-4">
        <span class="left">微信：</span>
        <span class="right">{{ propData.streamer_apply.wechat_no }}</span>
      </div>
      <div class="flex items-center mb-4">
        <span class="left">个人特长：</span>
        <span class="right">{{ propData.streamer_apply.strong_point }}</span>
      </div>
      <div class="flex mb-4 items-center">
        <span class="left">音频：</span>
        <audio :src="propData.streamer_apply.recording_url" controls></audio>
      </div>
    </el-card>

    <el-card :body-style="{ padding: '20px' }" shadow="always">
      <h1 class="title">主播标签</h1>
      <div class="flex items-center mb-4">
        <span class="left">音色：</span>
        <CheckBoxGroup :checkboxList="toneList" @checkboxModel="toneModel"/>
      </div>
      <div class="flex items-center mb-4">
        <span class="left">性格：</span>
        <CheckBoxGroup :checkboxList="characterList" @checkboxModel="characterModel"/>
      </div>
      <div class="flex items-center mb-4">
        <span class="left">特长：</span>
        <CheckBoxGroup :checkboxList="strongPointList" @checkboxModel="strongPoinModel"/>
      </div>
      <div class="flex mb-4 items-center">
        <span class="left">喜好：</span>
        <CheckBoxGroup :checkboxList="likeList" @checkboxModel="likeModel"/>
      </div>
    </el-card>
    <el-form ref="Form" :inline="false" :model="Form" :rules="rules" class="ml-8" label-width="120px" size="normal">
      <el-card :body-style="{ padding: '20px' }" shadow="always">
        <h1 class="title">面试评分</h1>

        <el-form-item label="声音清晰度" prop="audio">
          <el-radio-group v-model="Form.audio" @change="handleChange">
            <el-radio :label="10">声音清晰</el-radio>
            <el-radio :label="6">一般</el-radio>
            <el-radio :label="3">差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="吐字清晰度" prop="words">
          <el-radio-group v-model="Form.words" @change="handleChange">
            <el-radio :label="10">吐字清晰</el-radio>
            <el-radio :label="6">一般</el-radio>
            <el-radio :label="3">差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="特长" prop="strongPoint">
          <el-radio-group v-model="Form.strongPoint" @change="handleChange">
            <el-radio :label="10">能力强</el-radio>
            <el-radio :label="6">一般</el-radio>
            <el-radio :label="3">差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="直播设备" prop="equipment">
          <el-radio-group v-model="Form.equipment" @change="handleChange">
            <el-radio :label="10">设备齐全</el-radio>
            <el-radio :label="6">一般</el-radio>
            <el-radio :label="3">差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="应变能力" prop="resource">
          <el-radio-group v-model="Form.resource" @change="handleChange">
            <el-radio :label="10">思维敏捷</el-radio>
            <el-radio :label="6">一般</el-radio>
            <el-radio :label="3">差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="直播经验" prop="experience">
          <el-radio-group v-model="Form.experience" @change="handleChange">
            <el-radio :label="10">丰富</el-radio>
            <el-radio :label="6">一般</el-radio>
            <el-radio :label="3">差</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="直播玩法" prop="livePlay">
          <el-radio-group v-model="Form.livePlay" @change="handleChange">
            <el-radio :label="10">丰富</el-radio>
            <el-radio :label="6">一般</el-radio>
            <el-radio :label="3">差</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-card>
      <el-card :body-style="{ padding: '20px',marginBottom: '200px' }" shadow="always">
        <h1 class="title">面试结果</h1>

        <el-form-item label="面试结果" prop="status">
          <el-radio-group v-model="Form.status" @change="handleChange">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="-1">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="Form.status === 1" label="综合评定" prop="level">
          <!-- <el-input v-model="Form.level" size="normal" disabled></el-input> -->

          <el-select v-model="Form.level" disabled placeholder="请选择">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="Form.status === -1" label="拒绝原因" prop="reason">
          <el-input v-model="Form.reason" :rows="5" :show-word-limit="false" placeholder="请输入" resize="none"
                    style="width: 600px;" type="textarea"
          >
          </el-input>

        </el-form-item>

        <div class="ml-44">
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit('Form')">确定</el-button>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import { interviewResult, interviewStart } from '@/api/sys/anchorList'
import CheckBoxGroup from './components/checkboxGroup.vue'

export default {
  name: 'detailsPage',
  components: {
    CheckBoxGroup
  },
  data() {
    return {
      srcList: [],
      propData: undefined,
      options: [
        { value: 1, label: 'V1' },
        { value: 2, label: 'V2' },
        { value: 3, label: 'V3' },
        { value: 4, label: 'V4' },
        { value: 5, label: 'V5' },
        { value: 6, label: 'V6' },
        { value: 7, label: 'V7' },
        { value: 8, label: 'V8' }
      ],
      Form: {
        session: undefined,
        status: undefined,
        level: undefined,
        reason: undefined,
        audio: undefined, //声音清晰度
        words: undefined, //吐字清晰度
        strongPoint: undefined, //特长
        equipment: undefined, //直播设备
        resource: undefined, //应变能力
        experience: undefined, //直播经验
        livePlay: undefined, //直播玩法
      },
      rules: {
        session: [{ required: true, message: '请选择面试场次', trigger: 'blur' }],
        status: [{ required: true, message: '请选择面试结果', trigger: 'blur' }],
        level: [{ required: true, message: '请进行面试评分', trigger: 'blur' }],
        reason: [{ required: true, message: '请输入拒绝理由', trigger: 'blur' }],
        audio: [{ required: true, message: '请选择声音清晰度', trigger: 'change' }],
        words: [{ required: true, message: '请选择吐字清晰度', trigger: 'change' }], //吐字清晰度
        strongPoint: [{ required: true, message: '请选择特长', trigger: 'change' }], //特长
        equipment: [{ required: true, message: '请选择直播设备', trigger: 'change' }], //直播设备
        resource: [{ required: true, message: '请选择应变能力', trigger: 'change' }], //应变能力
        experience: [{ required: true, message: '请选择直播经验', trigger: 'change' }], //直播经验
        livePlay: [{ required: true, message: '请选择直播玩法', trigger: 'change' }], //直播玩法
      },
      /**
       * 音色
       */
      toneData: undefined,
      toneList: [
        { id: 1, name: '萝莉音' },
        { id: 2, name: '御姐音' },
        { id: 3, name: '暖男音' },
        { id: 4, name: '大叔音' },
        { id: 5, name: '主持音' },
        { id: 6, name: '其他' }
      ],
      /**
       * 性格参数
       */
      characterData: undefined,
      characterList: [
        { id: 1, name: '开朗' },
        { id: 2, name: '阳光' },
        { id: 3, name: '外向' },
        { id: 4, name: '真诚' },
        { id: 5, name: '自信' },
        { id: 6, name: '内向' },
        { id: 7, name: '缺乏自信' },
        { id: 8, name: '承受力差' },
        { id: 9, name: '内敛' },
        { id: 10, name: '头脑灵活' },
        { id: 11, name: '耐心' },
        { id: 12, name: '圆润' },
        { id: 13, name: '情绪化' },
        { id: 14, name: '其他' }
      ],
      /**
       * 特长参数
       */
      strongPointData: undefined,
      strongPointList: [
        { id: 1, name: '唱歌' },
        { id: 2, name: '说唱' },
        { id: 3, name: '情感故事' },
        { id: 4, name: '相声' },
        { id: 5, name: '其他' }
      ],
      /**
       * 喜好
       */
      likeData: undefined,
      likeList: [
        { id: 1, name: '唱歌' },
        { id: 2, name: '游戏' },
        { id: 3, name: '闲聊' },
        { id: 4, name: '倾听' },
        { id: 5, name: '其他' }
      ],
      user_id: undefined,
      userInfo: undefined
    }
  },
  created() {
    this.user_id = this.$route.query.id
    this.interviewStart(this.user_id)
  },
  methods: {
    interviewStart(user_id) {
      interviewStart({
        user_id: user_id
      }).then(res => {
        if (res.code === 200) {
          this.propData = res.data
          this.srcList = this.propData.user_phone
        }
      })
    },
    onSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const data = {
            id: this.propData.streamer_apply.id,
            streamer_tag: {
              toneData: this.toneData,
              characterData: this.characterData,
              strongPointData: this.strongPointData,
              likeData: this.likeData
            },
            streamer_score: {
              audio: this.Form.audio, //声音清晰度
              words: this.Form.words, //吐字清晰度
              strongPoint: this.Form.strongPoint, //特长
              equipment: this.Form.equipment, //直播设备
              resource: this.Form.resource, //应变能力
              experience: this.Form.experience, //直播经验
              livePlay: this.Form.livePlay, //直播玩法
            },
            refuse_msg: this.Form.status === -1 ? this.Form.reason : undefined,
            level: this.Form.status === 1 ? this.Form.level : undefined,
            status: this.Form.status
          }
          this.interviewResult(data)
        }
      })
    },
    interviewResult(data) {
      interviewResult(data).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.$router.push({
            path: 'anchorList'
          })
          this.$store.dispatch('tagsView/delView', this.$route).then(({ visitedViews }) => {
            this.$router.replace({ path: "anchorList" });
          })
        }
      })
    },
    handleChange(val) {
      this.Form.session = undefined
      this.Form.reason = undefined
      let level

      if (this.Form.status === 1) {
        level = this.Form.audio
          +
          this.Form.words
          +
          this.Form.strongPoint
          +
          this.Form.equipment
          +
          this.Form.resource
          +
          this.Form.experience
          +
          this.Form.livePlay
        if (level >= 60 && level <= 70) {
          this.Form.level = 3
        } else if (level >= 40 && level < 60) {
          this.Form.level = 2
        } else if (level >= 21 && level < 40) {
          this.Form.level = 1
        } else {
          this.Form.level = undefined
        }
      }
    },
    toneModel(item) {
      this.toneData = item.id
    },
    characterModel(item) {
      this.characterData = item.id
    },
    strongPoinModel(item) {
      this.strongPointData = item.id
    },
    likeModel(item) {
      this.likeData = item.id
    }
  },
}
</script>

<style lang="scss" scoped>
.detailBox {
  .left {
    width      : 120px;
    text-align : right;
  }

  .title {
    font-size     : 28px;
    margin-bottom : 15px;
  }

  .avatar {
    width           : 200px;
    height          : 200px;
    overflow        : hidden;
    border          : 1px darkgray dashed;
    display         : flex;
    align-items     : center;
    justify-content : center;
    border-radius   : 10px;
    font-size       : 32px;
  }

  .picture {
    width         : 200px;
    height        : 266px;
    overflow      : hidden;
    margin-right  : 15px;
    margin-bottom : 15px;
  }
}
</style>
